<template>
    <page-header-wrapper :title="false">
      <a-card title="假期管理">
        <a slot="extra">
          <a-button type="primary" size="small">+ 添加假期</a-button>
        </a>
        <a-table :columns="columns" :data-source="data" bordered>
          <div slot="operate">
            <a-button type="primary" size="small" :style="{ marginRight: '5px' }"><a-icon type="form"/> 修改</a-button>
            <a-button type="danger" size="small">X 删除</a-button>
          </div>
        </a-table>
      </a-card>
    </page-header-wrapper>
</template>

<script>
  const columns = [
    {
      title: '序号',
      dataIndex: 'key',
      key: 'key'
    },
    {
      title: '针对角色',
      dataIndex: 'target_role',
      key: 'target_role'
    },
    {
      title: '假期名称',
      dataIndex: 'holiday_name',
      key: 'holiday_name'
    },
    {
      title: '连休天数',
      dataIndex: 'days_off',
      key: 'days_off'
    },
    {
      title: '是否扣全勤',
      dataIndex: 'whether_deduct_full_attendance',
      key: 'whether_deduct_full_attendance'
    },
    {
      title: '是否扣基本工资',
      dataIndex: 'whether_deduct_basic_wage',
      key: 'whether_deduct_basic_wage'
    },
    {
      title: '扣除固定金额',
      dataIndex: 'deduct_fixed_amount',
      key: 'deduct_fixed_amount'
    },
    {
      title: '是否需要上传证明',
      dataIndex: 'need_upload_proof',
      key: 'need_upload_proof'
    },
    {
      title: '请假说明',
      dataIndex: 'leave_instructions',
      key: 'leave_instructions'
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      scopedSlots: { customRender: 'action' }
    }
  ]
  const data = [
    {
      key: 1,
      target_role: '组长',
      holiday_name: '婚假',
      days_off: '4',
      whether_deduct_full_attendance: '否',
      whether_deduct_basic_wage: '否',
      deduct_fixed_amount: '',
      need_upload_proof: '需要',
      leave_instructions: '婚假连休四天需要提供结婚证'
    }
  ]
  export default {
    name: 'HolidayManager',
    data () {
      return {
        data,
        columns
      }
    }
  }
</script>

<style scoped>

</style>
